<template>
	<!-- 选择菜品 -->
	<view class="dish-selector">
		<!-- 菜品分类 -->
		<view class="dish-selector-type row">
			<view class="row-label">{{ label }}：</view>
			<uni-data-select
				class="row-selector"
				v-model="value"
				:localdata="range"
				placeholder="选择菜品"
				@change="change"
			></uni-data-select>
		</view>
		<!-- 菜品卡片 -->
		<DishPreviewCard
			v-if="modelValue"
			:name="dish.name"
			:type="dish.type"
			:description="dish.description"
			:image="dish.imageurl"
		></DishPreviewCard>

		<view
			v-else
			class="add-dish"
		>
			<view class="tip">没有想要的菜？</view>
			<view
				class="link"
				@click="navigateToCreateDuishPage"
			>
				去添加一个吧
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'DishSelector',
	props: {
		dishTypeId: { type: Number, default: 0 },
		label: { type: String, default: '名称' },
		// defaultId: { type: Number, default: 0 },
		options: { type: Array, default: () => [] },
		modelValue: { type: [Number, String], default: '' },
	},
	data() {
		return {
			// value: this.modelValue,
			// dish: {},
		};
	},
	computed: {
		value: {
			get() {
				return this.modelValue;
			},
			set(val) {
				this.$emit('update:modelValue', val);
			},
		},
		range() {
			return this.options.map((opt) => ({
				value: opt.id,
				text: opt.name,
			}));
		},
		dish() {
			return this.options.find((dish) => dish.id === this.modelValue) || {};
		},
	},
	methods: {
		change(id) {
			// this.$emit('update:modelValue', id);
		},
		navigateToCreateDuishPage() {
			uni.navigateTo({
				// url: '../../pages/create-dish/create-dish',
				url: `../../pages/create-dish/create-dish?dishTypeId=${this.dishTypeId}`,
			});
		},
	},
};
</script>

<style scoped>
.dish-selector {
	padding: 24rpx 0rpx;
}
.row {
	display: flex;
	align-items: center;
	margin-bottom: 26rpx;
}
.row-selector {
	width: 601rpx;
}
.row-label {
	/* background-color: pink; */
	font-size: 18px;
	font-weight: bold;
	color: #1b1b1b;
}

.add-dish {
	display: flex;
	justify-content: center;
	align-items: center;
}

.add-dish .tip {
	font-size: 16px;
	color: #5c5c5c;
}

.add-dish .link {
	font-size: 16px;
	color: #268dff;
}
</style>
